<template>
  <!-- 网点选址 -->
  <div>
    <Row>
      <Col span="5">
        <Card>
          <div style="min-height: 730px">
            <Row>
              <Col span="6">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>网点选址</Col>
                </Row>
              </Col>
            </Row>
            <Table :columns="columns1" stripe border highlight-row class="nl_table" :data="data1"></Table>
          </div>
        </Card>
      </Col>
      <Col span="17" class="ss_right">
        <Card>
          <div style="min-height: 730px">
            <Row>
              <Col span="3">
                <Row type="flex" align="middle">
                  <Col span="2">
                    <div class="nl-square"></div>
                  </Col>
                  <Col>选址地图</Col>
                </Row>
              </Col>
            </Row>
            <div class="ss_map" id="ss_map"></div>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
// 使用高德地图
import { Scene, PointLayer } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
export default {
  data() {
    return {
      nowData: [],
      data1: [],
      columns1: [
        {
          // title: "序号",
          key: "num",
          align: "center",
          width: 80,
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "序号"
            );
          }
        },
        {
          // title: "地址",
          key: "address",
          align: "center",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "地址"
            );
          }
        }
      ]
    };
  },
  created() {
    this._getData();
    const scene = new Scene({
      id: "ss_map",
      map: new GaodeMap({
        style: "dark", // 样式URL
        center: [120.19382669582967, 30.258134],
        pitch: 0,
        zoom: 12,
        token: "48dc62a86208ace1bc3c3032f2944386"
      })
    });

    fetch("https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json")
      .then(res => res.json())
      .then(data => {
        const pointLayer = new PointLayer({})
          .source(data.list, {
            parser: {
              type: "json",
              x: "j",
              y: "w"
            }
          })
          .shape("cylinder")
          .size("t", function(level) {
            return [1, 2, level * 2 + 20];
          })
          .color("t", [
            "#094D4A",
            "#146968",
            "#1D7F7E",
            "#289899",
            "#34B6B7",
            "#4AC5AF",
            "#5FD3A6",
            "#7BE39E",
            "#A1EDB8",
            "#CEF8D6"
          ])
          .style({
            opacity: 1.0
          });
        scene.addLayer(pointLayer);
      });
  },
  methods: {
    //所有数据
    _getData() {
      //获取data1
      this.data1 = [];
      this.nowData = [];
      window.news = [];
      window.focusItem = {};
      //将数据填入data1
      for (let i = 0; i < 12; i++) {
        let a = {
          id: i,
          num: i + 1,
          address: "天津大学"
        };
        this.data1.push(a);
      }
      window.news = this.data1;
    }
  },
  mounted() {
    
  }
};
</script>

<style scoped>
.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
.nl_table {
  margin-top: 10px;
}
/* 右侧 */
.ss_right {
  margin-left: 1rem;
}
/* 地图容器 */
.ss_map {
  width: 100%;
  height: 75vh;
  background: greenyellow;
}
</style>
